<template>
  <div>
    <NuxtLayout name="backgroud">
      <div class="aboutme" v-loading="loading">
        <UserCard />
        <div class="aboutme-info">
          <n-divider style="color: #1abc9c;font-size: 22px;" dashed>基本信息</n-divider>
          <p>
            <span class="iconfont icon-user"></span>
            <span>真名：</span>
            <i>{{ userInfo.realName }}</i>
          </p>
          <p>
            <span class="iconfont icon-yonghu"></span>
            <span>昵称：</span>
            <i>{{ userInfo.userName }}</i>
          </p>
          <p>
            <span class="iconfont icon-github4"></span>
            <span>职业：</span>
            <i>{{ userInfo.occupation }}</i>
          </p>
          <p>
            <span class="iconfont icon-dianhua1"></span>
            <span>电话：</span>
            <i>{{ userInfo.phone }}</i>
          </p>
          <p>
            <span class="iconfont icon-youjian3"></span>
            <span>邮箱：</span>
            <i>{{ userInfo.mail }}</i>
          </p>
          <p>
            <span class="iconfont icon-weixin"></span>
            <span>微信：</span>
            <i>{{ userInfo.wechat }}</i>
          </p>
          <p>
            <span class="iconfont icon-qq3"></span>
            <span>QQ：</span>
            <i>{{ userInfo.qq }}</i>
          </p>
          <p>
            <span class="iconfont icon-github"></span>
            <span>Github：</span>
            <i>{{ userInfo.github }}</i>
          </p>
          <p>
            <span class="iconfont icon-guge"></span>
            <span>Gitee：</span>
            <i>{{ userInfo.gitee }}</i>
          </p>
          <p>
            <span class="iconfont icon-position-mark"></span>
            <span>地址：</span>
            <i>{{ userInfo.address }}</i>
          </p>
          <p class="aboutme-info_tag">
            <span class="iconfont icon-html2"></span>
            <span>技能标签：</span>
            <i class="aboutme-info_tag__item">
              <div
                v-for="(item,index) in userInfo.blog_tags"
                :key="index">
                <n-tag
                  :bordered="false"
                  :color="{ color:item.type,textColor:'#fff' }"
                  size="small"
                  dashed>
                  <template #icon>
                    <span style="color: #fff;font-size: 12px;" :class="'iconfont' + ' ' + item.icon"></span>
                  </template>
                  {{ item.name }}
                </n-tag>
              </div>
            </i>
          </p>
          <div class="aboutme-history">
            <n-divider style="color: #1abc9c;font-size: 22px;" dashed>网站发展史</n-divider>
            <n-timeline>
              <n-timeline-item 
                content="2009年9月博主萌生做个人博客的念头，网站开始启航"
                 />
              <n-timeline-item
                color="#185a56"
                content="在百度云购买虚拟主机，在万网购买域名，开始着手主机和域名的备案事宜"
                time="2019-11-03"
              />
              <n-timeline-item 
                type="error" 
                content="在一个月的忙碌和等待中主机和域名成功备案，开始计划选型和开发" 
                time="2019-12-08" />
              <n-timeline-item
                type="warning"
                content="前端Vue2搭建，后端thinkPHP构建，数据库MySQL，经过几个月的努力博客终于完成并上线"
                time="2019-12-08 到 2020-06-25"
              />
              <n-timeline-item
                color="#7c2028"
                content="博客上线后开始发布文章，博客正式运行。"
                time="2019-12-08 到 2021-11-03"
              />
              <n-timeline-item
                color="#e6ec12"
                content="由于工作太忙，很长一段时间没有打理，以至于虚拟空间过期域名过期没有发现，发现时已经晚了，数据库被清空，域名（webaiq.cn）被成都一家公司注册，很生气，我的心血啊"
                time="2022-03-04"
              />
              <n-timeline-item
                color="#67d3c2"
                content="经过一段时间平复心情，加之疫情原因国庆待家里无聊，决定重新开始。购买5年三丰云服务器，重新注册域名（lihyweb.cn）,重新备案，本站开始重生！"
                time="2022-10-01"
              />
              <n-timeline-item
                color="#7a65b4"
                content="开始技术选型，前端构建采用nuxt.js + Vue3.js，后端采用nodejs + expressjs构建，数据库MySQL"
                time="2022-10-02"
              />
              <n-timeline-item
                color="#7c2028"
                content="经过很长一段时间的开发终于在2023年8月15日完成上线，开始重生"
                time="2022-10-02 到 2023-08-15"
              />
            </n-timeline>
          </div>
        </div>
      </div>
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
import { getBloggerInfo } from '../../service/api/Blogger'
let userInfo:any = ref({})
let loading = ref(false)
const getInfo = async () => {
  loading.value = true
  await nextTick()
  try {
    const res:any = await getBloggerInfo({})
    const data = res.data._value.data
    userInfo.value = data[0]
    loading.value = false
  } catch(err) {
    console.log(err)
  }
}
onMounted(()=>{
  getInfo()
})
</script>
<script lang="ts">
export default {
  layout:false
}
</script>

<style scoped lang="scss">
.aboutme{
  padding-top: 20px;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  &-info{
    height: auto;
    width: 100%;
    margin-left: 20px;
    border-radius: 6px;
    font-size: 18px;
    padding: 0 20px 20px 20px;
    background-color: rgba($color: #fff, $alpha: 0.9);
    i{
      margin-right: 5px;
    }
    p{
      margin-bottom: 20px;
    }
    span{
      color: $yun-color;
    }
    .iconfont{
      font-size: 24px;
      margin-right: 5px;
    }
    &_tag{
      display: flex;
      &__item{
        display: flex;
        div{
          margin-right: 5px;
        }
      }
    }
  }
  &-history{
    width: 100%;
  }
}
</style>